(function () {
  // 轮播图初始数据
  let arr = [
    {
      url: 'https://overwatch.nosdn.127.net/2/media/gameplay/cinematic-trailer.32Pn2.jpg',
      title: "开场动画",
      time: '5:22',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2022/6/18/9385a3cf606f12f0ec045244f8f8a831.jpg',
      title: "动画短片：《废民》",
      time: '7:25',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_JQ_CG_v2_zhCN_CADPA.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2018/11/5/0e282147eef1db225bbbcc9469efbd6d.jpg',
      title: "动画短片：《重逢》",
      time: '7:58',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/artwork/dva-animated-short.jpg',
      title: "动画短片：《星光闪耀》",
      time: '7:34',
      videourl: ' https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/artwork/reinhardt-animated-short.jpg',
      title: "动画短片：《荣耀》",
      time: '7:21',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Reinhardt_HonorAndGlory.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/mei-animated-short.jpg',
      title: "动画短片：《我们出发吧》",
      time: '9:46',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Mei_RiseAndShine.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/zz/201611/05saba700x396.jpg',
      title: "动画短片：《渗透》",
      time: '6:08',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Sombra_Infiltration.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2016/11/14/bastion-animated-short.jpg',
      title: "动画短片：《最后的堡垒》",
      time: '7:11',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/hero_media_thumb.jpg',
      title: "动画短片：《英雄》",
      time: '6:30',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/dragons-animated-short.jpg',
      title: "动画短片：《双龙》",
      time: '7:51',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Hanzo%26Genji_Dragons.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/widowmaker-animated-short.jpg',
      title: "动画短片：《新生》",
      time: '6:11',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Widowmaker_Alive.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/gameplay/winston-animated-short.jpg',
      title: "动画短片：《归来》",
      time: '7:48',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/theatrical-teaser.2xgWi.jpg',
      title: "剧场宣传片",
      time: '1:00',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/wintro-cinematic-trailer.jpg',
      title: "动画短片：守望动员令",
      time: '2:06',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_CinematicTeaser_AreYouWithUs_zhCN.mp4'
    }, {
      url: 'https://hearthstone.nosdn.127.net/a/images/2022/6/20/1fd875e333da5a274246b4acc8147d3c.jpg',
      title: "英雄故事：渣客女王",
      time: '1:17',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OriginStory_JQ_CADPA.mp4'
    }, {
      url: 'https://hearthstone.nosdn.127.net/a/images/2022/6/20/b774078823b19a094e7d42c628be0a1f.jpg',
      title: "英雄故事：索杰恩",
      time: '1:25',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OriginStory_Sojourn.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/OW_2020_Hero32_OrginStoryThumbnail.jpg',
      title: "英雄故事：回声",
      time: '1:25',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_EchoOrigins_zhCN_hu3JYk1.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/heroes/Sigma/sigma-origins-video.jpg',
      title: "英雄故事：西格玛",
      time: '2:06',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Sigma_%CE%A3jdn4u.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2019/2/28/e71e72ef7b2afbe2173c4118ea2fad7b.jpg',
      title: "英雄故事：巴蒂斯特",
      time: '1:46',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_2019_Hero30_BAPTISTE_ORIGIN_zhCN_zh63jki.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2018/11/5/50529a771f46cb41161f22c48b1b7eca.jpg',
      title: "英雄故事：艾什",
      time: '1:15',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR-ASHE-Origin-zhCN_1080P_m95hy.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/wrecking-ball-origin.jpg',
      title: "英雄故事：破坏球",
      time: '1:25',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_WreckingBall.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/brigitte-origins-video.jpg',
      title: "英雄故事：布丽吉塔",
      time: '1:04',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Brigitte.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/moira-origins-video.jpg',
      title: "英雄故事：莫伊拉",
      time: '1:27',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Moira.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/doomfist-origins-video.jpg',
      title: "英雄故事：末日铁拳",
      time: '1:54',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Doomfist.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2017/3/23/orisa-origins-video.jpg',
      title: "英雄故事：奥丽莎",
      time: '1:31',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Orisa.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2016/11/14/sombra-origins-video-b7bbc4ee1d373eaa85ca3328ed0847fb3841e060395f9f0c09814de896eae1764b46957af83ba19249ebb1969a85b641c5dfa3428605334d68d8b0e15d89dc2c.jpg',
      title: "英雄故事：黑影",
      time: '1:35',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Sombra.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/zz/201607/ana-origins-video.jpg',
      title: "英雄故事：末日铁拳",
      time: '2:24',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/doomfist-origins-video.jpg',
      title: "英雄故事：安娜",
      time: '1:54',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_OrginStory_Ana.mp4'
    }, {
      url: 'https://hearthstone.nosdn.127.net/a/images/2022/6/20/c0273d275f3e33d25e13e65688864f77.jpg',
      title: "索杰恩技能简介",
      time: '1:24',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_Gameplay_Sojourn.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-sizzle-reel.jpg',
      title: "回声技能简介",
      time: '0:54',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_HeroTrailer_Echo_zhCN_O31j1.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/heroes/Sigma/sigma-sizzle-reel.jpg',
      title: "西格玛 技能简介",
      time: '1:30',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_Sigma_HeroTrailer_zhCN_ze%5Ej8.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2019/3/20/4ab1905e77d707c9cada7330e79b1ded.jpg',
      title: "巴蒂斯特技能简介",
      time: '1:23',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_HeroTrailer-Baptiste_zhCN_9o9xfr.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2018/11/5/fbb244973b068bdff5459d753f38c20d.jpg',
      title: "艾什技能简介",
      time: '1:57',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_HeroTrailer-Ashe_zhCN_1080P_hf4j5.mp4'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/wrecking-ball-gameplay-thumb.jpg',
      title: "破坏球技能简介",
      time: '1:25',
      videourl: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_WB-Sizzle_zhCN_YT.mp4.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/1/assets/images/hero/brigitte/media/video/brigitte-intro-thumbnail.jpg',
      title: "布丽吉塔技能简介",
      time: '1:14',
      videourl: 'https://flv2.bn.netease.com/videolib3/1803/20/YVpnl2879/HD/YVpnl2879-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/moira-sizzle-reel.jpg',
      title: "莫伊拉技能简介",
      time: '1:23',
      videourl: 'https://flv2.bn.netease.com/videolib3/1711/04/OEQmI6379/HD/OEQmI6379-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/2/media/videos/doomfist-sizzle.jpg',
      title: "末日铁拳技能简介",
      time: '1:16',
      videourl: 'https://flv2.bn.netease.com/videolib3/1707/27/KDPHG4373/HD/KDPHG4373-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2017/3/23/orisa-sizzle-video.jpg',
      title: "奥丽莎技能简介",
      time: '1:00',
      videourl: 'https://flv.bn.netease.com/videolib3/1703/22/tWVCX9409/HD/tWVCX9409-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/2/zz/201611/05sbskill700x396.jpg',
      title: "黑影技能简介",
      time: '1:12',
      videourl: 'https://flv.bn.netease.com/videolib3/1611/04/tckrM3675/SD/tckrM3675-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2016/11/14/ana-sizzle-reel.jpg',
      title: "安娜技能简介",
      time: '1:08',
      videourl: 'https://flv.bn.netease.com/videolib3/1607/13/WlJni5815/HD/WlJni5815-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/2/media/gameplay/zenyatta-preview.0WJ2y.jpg',
      title: "禅雅塔游戏预览",
      time: '7:50',
      videourl: 'https://flv.bn.netease.com/videolib3/1506/26/TpRrx3064/HD/TpRrx3064-mobile.mp4'
    },
    {
      url: 'https://overwatch.nosdn.127.net/2/media/gameplay/zenyatta-gameplay.0johk.jpg',
      title: "禅雅塔技能简介",
      time: '0:59',
      videourl: 'https://flv.bn.netease.com/videolib3/1506/26/Qhqku0228/HD/Qhqku0228-mobile.mp4'
    },
  ]
  // 渲染函数
  const box = document.querySelector('.lunbo1')
  console.log(box);
  box.innerHTML = arr.map((item, i) => {
    return `
    <div class="mediaitem" >
         <a href="#" class="cardlink" >
        <div class="csrt">
            <div class="top" style="background-image: url(${item.url});" data-url=${item.videourl} data-title=${item.title} data-id="${i + 1}" data-num="${arr.length}">
                      </div>
                    </div>
                    <div class="cardbottom">
                      <div class="cardcta">
                        <div class="cardplaybtn"></div>
                        <time class="cardtime">${item.time}</time>
                      </div>
                      <div class="cardcaption">
                        <h1>${item.title}</h1>
                      </div>
                    </div>
                  </a>
                </div>
    `
  }).join('')
  // 通过数据长度判断i的上限是多少
  let inum = Math.ceil((arr.length) / 4)
  console.log(inum);
  const prev = document.querySelector('.previous')
  const next = document.querySelector('.next')
  let trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width

  // 页面尺寸发生变化重新加载clientWidth
  // 并渲染  难点一
  $(window).resize(_.throttle(checkresize, 200))
  function checkresize() {
    trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width
    console.log(trastnum);
    box.style.transform = `translateX(-${trastnum * i}px)`
  }
  // 跳转数值判断
  let i = 0
  // 上一张点击事件
  prev.addEventListener('click', () => {
    i--
    if (i == 0) {
      i = 0
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
  // 下一张点击事件
  next.addEventListener('click', () => {
    i++
    if (i == inum) {
      i = i - 1
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
})();

// 视频播放模态框
(function () {
  // 1.首先先要创造公共的模态框的构造函数
  function Model(url = '', title = '', id = '', num = '', picurl = '') {
    this.url = url
    this.title = title
    this.id = id
    this.num = num
    this.picurl = picurl
    console.log(this.ids);
    // 创建节点
    this.modelBox = document.createElement('div')
    this.modelBox.className = 'modal'
    this.modelBox.innerHTML = `
    <div class="box">
    <div class="header">
      <div class="title">${this.title}</div>
      <div class="num data" data-id=${this.id}>${this.id}/${this.num}</div>
    </div>
    <div class="content">
      <video width="100%" height="100%" controls autoplay preload="auto" src=${this.url}>
      </video>
      <img src="${this.picurl}" alt="  " style="width: 100%;height: 100%;">
    </div>
  
      <a class="closeBtn"></a>
  </div>
    `
    /*    <div class="control">
       <a class="prev tp"></a>
       <a class="next bp"></a>
       </div> */
  }
  // 将打开方法挂载模态框的构造函数原型身上
  Model.prototype.open = function () {
    // 判断是否有
    if (!document.querySelector('.model')) {
      document.body.appendChild(this.modelBox)
      // 同时需要为模态框添加事件监听关闭操作
      const closebtn = document.querySelector('.closeBtn')
      // const nextX = document.querySelector('.next.bp')
      // console.log(nextX);
      // nextX.addEventListener('click', function () {
      //   let num = document.querySelector('.num.data').dataset.id

      // })
      closebtn.addEventListener('click', () => {
        this.close()//这里只能用箭头函数 
        // 我们需要this指向Model
      })

    }
  }
  // 为Model的原型再添加关闭方法
  Model.prototype.close = function () {
    document.body.removeChild(this.modelBox)
  }
  const box = document.querySelector('.lunbo1')
  // 事件委托1
  box.addEventListener('click', function (e) {
    if (e.target.tagName === 'DIV') {
      const m = new Model(e.target.dataset.url, e.target.dataset.title, e.target.dataset.id, e.target.dataset.num)
      m.open()
    }
  })
  const box2 = document.querySelector('.lunbo2')
  // 事件委托2
  box2.addEventListener('click', function (e) {
    if (e.target.tagName === 'DIV') {
      const m = new Model('', e.target.dataset.title, e.target.dataset.id, e.target.dataset.num, e.target.dataset.picurl)
      m.open()
    }
  })
  const box4 = document.querySelector('.lunbo4')
  // 事件委托2
  box4.addEventListener('click', function (e) {
    if (e.target.tagName === 'DIV') {
      const m = new Model('', e.target.dataset.title, e.target.dataset.id, e.target.dataset.num, e.target.dataset.picurl)
      m.open()
    }
  })
})();

// 第二个轮播图
(function () {
  let arr = [
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2021/1/13/d77c571f3e6294ad44901774457d7883.jpeg',
      title: '铁坂'
    },
    {
      url: 'https://overwatch.nosdn.127.net/a/images/2021/1/13/e3f51539f74918bb12697207788af77d.jpeg',
      title: '铁坂'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2021/1/13/70dadcf36262b15cb803223ed56ad252.jpeg',
      title: '铁坂'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2021/1/13/d7201dc3e904e9f8f5d124c787e3ed44.jpeg',
      title: '铁坂'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-screenshot-005.jpg',
      title: '"回声"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-screenshot-004.jpg',
      title: '"回声"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-screenshot-003.jpg',
      title: '"回声"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-screenshot-002.jpg',
      title: '"回声"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-screenshot-001.jpg',
      title: '"西格玛"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/sigma-screenshot-004.jpg',
      title: '"西格玛"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/sigma-screenshot-003.jpg',
      title: '"西格玛"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/sigma-screenshot-002.jpg',
      title: '"西格玛"'
    }, {
      url: 'https://overwatch.nosdn.127.net/2/media/screenshots/sigma-screenshot-001.jpg',
      title: '哈瓦那'
    }, {
      url: 'https://overwatch.nosdn.127.net/a/images/2019/5/8/5b11a3ae48531edd31b61310e770dded.jpg',
      title: '哈瓦那'
    },
  ]
  // 渲染函数
  const box = document.querySelector('.lunbo2')
  console.log(box);
  box.innerHTML = arr.map((item, i) => {
    return `
    <div class="mediaitem" >
    <a  class="cardlink" >
   <div class="csrt">
       <div class="top" style="background-image: url(${item.url});"  data-picurl=${item.url} data-title=${item.title} data-id="${i + 1}" data-num="${arr.length}" >
                 </div>
               </div>
               <div class="cardbottom">
                 <div class="cardcaption">
                   <h1>${item.title}</h1>
                 </div>
               </div>
             </a>
           </div>
    `
  }).join('')
  // 通过数据长度判断i的上限是多少
  let inum = Math.ceil((arr.length) / 4)
  console.log(inum);
  const prev = document.querySelector('.previous.second')
  const next = document.querySelector('.next.second')
  let trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width

  // 页面尺寸发生变化重新加载clientWidth
  // 并渲染  难点一
  $(window).resize(_.throttle(checkresize, 200))
  function checkresize() {
    trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width
    console.log(trastnum);
    box.style.transform = `translateX(-${trastnum * i}px)`
  }
  // 跳转数值判断
  let i = 0
  // 上一张点击事件
  prev.addEventListener('click', () => {
    i--
    if (i == 0) {
      i = 0
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
  // 下一张点击事件
  next.addEventListener('click', () => {
    i++
    if (i == inum) {
      i = i - 1
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
})();

(function () {
  let arr = [{
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/Novel/“妖怪”—守望先锋全新短篇小说.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2022/9/26/24ecc0698db283e220e9f3f4fbd1f256.jpg',
    title: '《妖怪》',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OW_2.5_Final_CN.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2022/3/18/3ff7c4760361406e7834b4da984ccb0b.jpg',
    title: '《新鲜血液》第五期',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/Novel/“武力准则”—守望先锋全新短篇小说.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2022/2/22/488421e2eb16d68405787a83de1c75a3.jpg',
    title: '《武力准则》',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OW_2.4_Final_CN.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2022/2/8/4144e5f5f2452f05f812abaa5bc8d1c1.jpg',
    title: '《新鲜血液》第四期',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OW_2.3_CN_FINAL.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2022/1/11/67dfcc6703103e1fa71561e47bc38758.jpg',
    title: '《新鲜血液》第三期',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OW_2.2_CN_Final.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2021/12/15/a97b394bd8819b638aac84eab4f25826.jpg',
    title: '《新鲜血液》第二期',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OW_2.1_CN_FINAL-NewBlood_01.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2021/11/9/d952f3a7ac95835fe213f62ae98dff5e.jpg',
    title: '《新鲜血液》第一期',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/Novel/《死局反叛者》第一章-守望先锋小说新作.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2021/7/2/5a09def699030a8c831f1f71f181a80e.jpg',
    title: '《死局反叛者》第一章',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OVRWTR_i5_CN_E73s4bM.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2021/2/25/a047692a101633fa80b5c5a2903650ec.jpg',
    title: '“猎空”——伦敦来电#5',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OVRWTR_i3_CN_1uNx2.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2021/1/14/ea6eff1270fac9824ab35833f80f879f.jpg',
    title: '“猎空”——伦敦来电#4',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OVRWTR_i3_CN_Pz2h3I.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2020/12/1/a741fcb7104ba01c8ffe3caf94c2e89c.jpg',
    title: '“猎空”——伦敦来电#3',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/Novel/OW_2020_Symmetra_Stone-By-Stone_zhCN_vfr61.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2020/11/17/a9c17094f10e8938dc02cc1651aca5cb.jpg',
    title: '《一砖一石》',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OW_2.1_CN_FINAL-NewBlood_01.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2020/10/15/4aab5ee8aa8b6f5f3bb7ebc695012630.jpg',
    title: '“猎空”——伦敦来电#2',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/comic/OVRWTR_i1_DHDP_CN_L5fh.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2020/9/15/8dd96425bb5043d8ae507de78281a0bd.jpg',
    title: '“猎空”——伦敦来电#1',
  },
  {
    pdfurl: 'https://overwatch.nosdn.127.net/2/media/Novel/“女武神”—守望先锋全新短篇小说.pdf',
    url: 'https://overwatch.nosdn.127.net/a/images/2020/6/14/4dc23a83f9ed1fd2b6ad4e4f17471005.jpg',
    title: '《女武神》',
  },
  ]
  // 渲染函数
  const box = document.querySelector('.lunbo3')
  console.log(box);
  box.innerHTML = arr.map((item, i) => {
    return `
      <div class="mediaitem" >
      <a href=${item.pdfurl} class="cardlink" target="_blank">
     <div class="csrt">
         <div class="top longpic" style="background-image: url(${item.url});" >
                   </div>
                 </div>
                 <div class="cardbottom">
                   
                   <div class="cardcaption">
                     <h1>${item.title}</h1>
                   </div>
                 </div>
               </a>
             </div>
      `
  }).join('')
  // 通过数据长度判断i的上限是多少
  let inum = Math.ceil((arr.length) / 4)
  console.log(inum);
  const prev = document.querySelector('.previous.thred')
  const next = document.querySelector('.next.thred')
  let trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width

  // 页面尺寸发生变化重新加载clientWidth
  // 并渲染  难点一
  $(window).resize(_.throttle(checkresize, 200))
  function checkresize() {
    trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width
    console.log(trastnum);
    box.style.transform = `translateX(-${trastnum * i}px)`
  }
  // 跳转数值判断
  let i = 0
  // 上一张点击事件
  prev.addEventListener('click', () => {
    i--
    if (i == 0) {
      i = 0
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
  // 下一张点击事件
  next.addEventListener('click', () => {
    i++
    if (i == inum) {
      i = i - 1
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
})();
// 
(function () {
  let arr = [{
    url: 'https://overwatch.nosdn.127.net/2/media/screenshots/echo-concept-thumb.jpg',
    title: '“回声”',
  },
  {
    url: 'https://overwatch.nosdn.127.net/2/media/screenshots/sigma-concept-thumbnail.jpg',
    title: '“西格玛”',
  },
  {
    url: 'https://overwatch.nosdn.127.net/a/images/2019/2/27/8f6fb3a084f62131c655365c8eb047b6.jpg',
    title: '巴蒂斯特',
  },
  {
    url: 'https://overwatch.nosdn.127.net/a/images/2018/11/5/e74276f20852d3e6b7f3ee06e77b1840.jpg',
    title: '“破坏球”',
  }, {
    url: 'https://overwatch.nosdn.127.net/2/media/artwork/brigitte-concept-s.jpg',
    title: '布丽吉塔',
  }, {
    url: 'https://overwatch.nosdn.127.net/2/media/artwork/moira-concept-s.jpg',
    title: '莫伊拉',
  }, {
    url: 'https://overwatch.nosdn.127.net/2/media/artwork/doomfist-concept_small.jpg',
    title: '“末日铁拳”',
  }, {
    url: 'https://overwatch.nosdn.127.net/2/media/artwork/orisa-concept_350x192.jpg',
    title: '奥丽莎',
  }, {
    url: 'https://overwatch.nosdn.127.net/2/media/artwork/sombra-concept_thumb.jpg',
    title: '“黑影”',
  },
  ]
  // 渲染函数
  const box = document.querySelector('.lunbo4')
  console.log(box);
  box.innerHTML = arr.map((item, i) => {
    return `
     <div class="mediaitem" >
     <a class="cardlink" >
    <div class="csrt">
        <div class="top" style="background-image: url(${item.url});"  url(${item.url});"  data-picurl=${item.url} data-title=${item.title} data-id="${i + 1}" data-num="${arr.length}" >
                  </div>
                </div>
                <div class="cardbottom">
                  <div class="cardcaption">
                    <h1>${item.title}</h1>
                  </div>
                </div>
              </a>
            </div>
     `
  }).join('')
  // 通过数据长度判断i的上限是多少
  let inum = Math.ceil((arr.length) / 4)
  console.log(inum);
  const prev = document.querySelector('.previous.four')
  const next = document.querySelector('.next.four')
  let trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width

  // 页面尺寸发生变化重新加载clientWidth
  // 并渲染  难点一
  // jq
  $(window).resize(_.throttle(checkresize, 200))
  function checkresize() {
    trastnum = document.querySelector('.mediaitems').getBoundingClientRect().width
    console.log(trastnum);
    box.style.transform = `translateX(-${trastnum * i}px)`
  }
  // 跳转数值判断
  let i = 0
  // 上一张点击事件
  prev.addEventListener('click', () => {
    i--
    if (i == 0) {
      i = 0
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
  // 下一张点击事件
  next.addEventListener('click', () => {
    i++
    if (i == inum) {
      i = i - 1
    }
    box.style.transform = `translateX(-${trastnum * i}px)`
  })
})()
//注意bug：window.onresize最后一个会覆盖前面的onresize  使用jq